<template>
  <s-page custom-class="Demo-Page">
    <view class="container">
      <c-demo-block>
        <view class="btn-list">
          <s-button v-for="name of list" :key="name" block @click="handleShow(name)">{{ name }}</s-button>
        </view>
      </c-demo-block>
    </view>
    <view class="transition-wrap">
      <s-transition
        v-model="visible"
        :name="name"
        @before-enter="beforeEnter"
        @enter="enter"
        @before-leave="beforeLeave"
        @leave="leave"
      >
        <view class="transition-content" @click="visible = false">点击关闭</view>
      </s-transition>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    name: 'fade',
    list: [
      'fade',
      'zoom-in',
      'zoom-out',
      'fade-left',
      'fade-right',
      'fade-top',
      'fade-bottom',
      'slide-left',
      'slide-right',
      'slide-top',
      'slide-bottom',
      'custom',
    ],
  }),
  methods: {
    handleShow(name) {
      this.name = name;
      this.visible = true;
    },
    beforeEnter() {
      console.log('before-enter');
    },
    enter() {
      console.log('enter');
    },
    beforeLeave() {
      console.log('before-leave');
    },
    leave() {
      console.log('leave');
    },
  },
};
</script>

<style lang="scss">
.Demo-Page {
  padding: 0 $padding-md;
  .transition-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--window-top);
    bottom: var(--window-bottom);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    .transition-content {
      width: 300rpx;
      height: 300rpx;
      border-radius: $border-radius-lg;
      background: $primary;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $white;
      pointer-events: auto;
    }

    @keyframes s-animate-custom-enter {
      from {
        opacity: 0;
        transform: rotate(-270deg);
      }

      to {
        opacity: 1;
        transform: rotate(0);
      }
    }
    @keyframes s-animate-custom-leave {
      from {
        opacity: 1;
        transform: rotate(0);
      }

      to {
        opacity: 0;
        transform: rotate(-270deg);
      }
    }

    .s-animate-custom-enter {
      animation-name: s-animate-custom-enter;
    }
    .s-animate-custom-leave {
      animation-name: s-animate-custom-leave;
    }
  }
  .btn-list {
    ::v-deep {
      .s-button {
        margin-right: 30rpx;
        margin-bottom: 20rpx;
        &--block,
        &--large {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
